<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Inventory</title>
    <link rel="stylesheet" href="../node_modules/jquery-ui-dist/jquery-ui.css">
    <link rel="stylesheet" href="../node_modules/jquery-ui-dist/jquery-ui.theme.css">
</head>
<body>
<h1>Inventory</h1>
<table id="inventory">
    <thead>
    <tr class="one">
        <th>Product</th>
        <th>Quantity</th>
        <th>Price</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>
            <a href="spam.html" data-tooltip-text="Nutritious and delicious!">Spam</a>
        </td>
        <td>4</td>
        <td>2.5</td>
    </tr>
    <tr class="two">
        <td>
            <a href="egg.html" data-tooltip-text="Farm fresh or scrambled!">Egg</a>
        </td>
        <td>12</td>
        <td>4.32</td>
    </tr>
    <tr>
        <td>
            <a href="gourmet-spam.html" data-tooltip-text="Chef Hermann's recipe.">Gourmet Spam</a>
        </td>
        <td>14</td>
        <td>7.89</td>
    </tr>
    </tbody>
    <tfoot>
    <tr class="two" id="sum">
        <td>Total</td>
        <td></td>
        <td></td>
    </tr>
    <tr id="average">
        <td>Average</td>
        <td></td>
        <td></td>
    </tr>
    </tfoot>
</table>
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/jquery-ui-dist/jquery-ui.js"></script>
<script src="js/inventory.js"></script>
</body>
</html>